<template>
	<view class="categorys">
		<view class="categoryBox" :class="isChange?'active':''">
			<view v-for="(item,index) in cateList" :key="index" @click="changeNum(item.id)" class="category_item" :class="NumCate==item.id?'active':''">
				<image :src="`${item.logo.includes('https')?item.logo:(uniConfig.ssoPath + item.logo)}`" mode="widthFix"/>
				<text>{{item.name}}</text>
			</view>
		</view>
        <template v-if="productList.length > 0">
            <view v-for="(item,index) in productList" :key="index" class="pList" @click="getDetail(item.id)">
                <view class="pList_left" ><image :src="`${uniConfig.ssoPath + item.logo}`" /></view>
                <view class="pList_right">
                    <view>{{item.name}}</view>
                    <view class="pList_text">￥{{item.price}}</view>
                </view>
            </view>
        </template>
		<view v-else style="margin-top:35vh">
            <uv-empty text="当前分类没有商品"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
        </view>
		<view class="lastchild"></view>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref } from 'vue'
import { getProductList,getCategory } from "@/api/product"
import { onLoad , onPageScroll} from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
const NumCate = ref<any>()
const productList = ref<any>([])
const cateList = ref<any>([])
const isChange = ref<any>(false)
const getDetail = (value:any) =>{
	uni.navigateTo({
		url: `/pages/mall/detail?productId=${value}`
	})
}
const changeNum = (value:any)=>{
	NumCate.value = value
	getCateList(value)
}
const getCateList = (value:any)=>{
	getProductList({categoryId:value}).then(res=>{
		if(res.success){
			productList.value = res.data.records
		}
	})
}
onLoad(async (options : any) => {
    NumCate.value = options.categoryId
    getCateList(NumCate.value)
	getCategory(options).then(res=>{
        if(res.success){
            cateList.value = res.data
        }
    })
})
onPageScroll((e) => {
	if(e.scrollTop>10){
		isChange.value = true
	}else{
		isChange.value = false
	}
})
</script>

<style lang="scss">
.categorys{
    width: 100%;
    height: 100%;
    flex: 1;
    padding-top: 15vh;
    box-sizing: border-box;
    .categoryBox{
        padding:32rpx;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        z-index: 9;
        white-space: nowrap;
        overflow-x: scroll;
        &.active{
            background-color: #f9f9f9;
        }
        .category_item{
            display: flex;
            flex-direction: column;
            flex-basis: 150upx;
            flex-shrink: 0;
            white-space: nowrap;
            align-items: center;
            justify-content: center;
            image{
                border-radius:50%;
                width:125rpx;
                height:125rpx;
                border:2px solid transparent;
                border-radius:50%;
                margin-bottom: 12rpx;
            }
            &.active{
                image{
                    border:2px solid rgb(245,238,182) !important;
                }
                text{
                    color:rgb(245,238,182);
                    font-weight: 600;
                }
            }
            
        }
    }
}
.pList{
    display: flex;
    width: 90%;
    margin: 32rpx auto 0;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0px 12px rgba(0,0,0,.1);
    align-items: center;
}
.lastchild{
    margin-bottom:32rpx;
}
.pList_right{
    padding: 0rpx 32rpx;
}
.pList_left{
    display: flex;
}
.pList_left image{
    width: 200rpx;
    height: 200rpx;
    border-radius: 9px;
}
.pList_text{
    color: #d2553d;
    margin-top: 32rpx;
    font-weight: 600;
}
</style>